<template>
	<view class="root">
		<view
			v-if="orderInfo.store.store_address"
			class="bgc-fff br-20"
			:style="{ margin: `20rpx`, padding: `20rpx` }"
		>
			<view v-if="orderInfo.store.store_address" class="fd-row mb-24">
				<label class="fs-24 bgc-4a7cee color-fff br-8 height-44 pl-10 pr-10">商家</label>
				<text class="f1 color-333 fs-32 lh-44 ml-28">
					{{
						`${orderInfo.store.store_address.address || "--"} ${
							orderInfo.store.store_address.name || "--"
						}`
					}}
				</text>
			</view>
			<label v-if="orderInfo.store.storePhone" class="fs-28 height-60">
				<text class="color-999 mr-12">商家电话：</text>
				<text class="color-333">{{ orderInfo.store.storePhone }}</text>
			</label>
			<label v-if="orderInfo.store.phoneNumber" class="fs-28 height-60">
				<text class="color-999 mr-12">预留电话：</text>
				<text>{{ orderInfo.store.phoneNumber }}</text>
			</label>
			<label v-if="orderInfo.store.date" class="fs-28 height-60">
				<text class="color-999 mr-12">自提时间：</text>
				<text class="color-4a7cee">{{ orderInfo.store.date }}</text>
			</label>
		</view>

		<view
			:style="{ margin: `20rpx`, padding: `20rpx 30rpx` }"
			class="bgc-fff br-20"
			v-if="orderInfo.address"
		>
			<text class="f1 fs-32 color-333 fw-600">
				{{
					`${orderInfo.address.provinceName} ${orderInfo.address.cityName} ${orderInfo.address.countyName} ${orderInfo.address.detailInfo}`
				}}
			</text>
			<text class="mt-18 color-999 fs-28">
				{{ orderInfo.address.userName }} {{ orderInfo.address.telNumber }}
			</text>
		</view>

		<view :style="{ margin: `20rpx`, padding: `40rpx 20rpx 20rpx` }" class="bgc-fff br-20">
			<view v-for="(commodity, index) in orderInfo.list" :key="index" class="fd-row mb-20">
				<image
					:style="{ width: `130rpx`, height: `130rpx` }"
					class="bgc-eee br-12"
					:src="commodity.cover_image"
					mode="aspectFill"
				/>
				<view class="ml-28 jc-sa f1">
					<text class="fs-30 color-333">{{ commodity.name }}</text>
					<label class="jc-sb">
						<text class="color-999 fs-28">x{{ commodity.num }}</text>
						<text class="fw-600">
							<text class="color-333 fs-30">实付：</text>
							<text class="color-fa0707 fs-32">
								￥{{ commodity.price.toFixed(2) }}
							</text>
						</text>
					</label>
				</view>
			</view>

			<view class="mt-20 pt-20" :style="{ borderTop: `1rpx solid #f7f7f7` }">
				<label
					v-for="(option, optionIndex) in orderInfo.options"
					:key="optionIndex"
					class="lh-2 fs-28 jc-sb"
				>
					<text class="color-999">{{ option.title }}</text>
					<text class="color-333">{{ option.value }}</text>
				</label>
			</view>
		</view>

		<view
			class="bgc-fff fd-row safe-area-inset-bottom content-box jc-center ai-center fixed bottom-0 width-100percent mr-30"
			:style="{ height: `90rpx` }"
		>
			<text>
				<text class="color-333 fs-32 fw-600 lh-60">合计：</text>
				<text class="color-fe0b0b fs-40 fw-600 lh-60">
					￥{{ orderInfo.all_price.toFixed(2) }}
				</text>
				<text class="fs-24 ml-12">
					<text class="color-999">共</text>
					<text class="color-fe0b0b">{{ orderInfo.num }}</text>
					<text class="color-999">件商品</text>
				</text>
			</text>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class OrderDetail extends Vue {
		// component property
		orderInfo: AnyObject = {
			store: {},
			address: null,
			list: [],
			all_price: 0,
			num: 0,
		};
		commodity: AnyObject = {};

		onLoad({ id }: AnyObject) {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/index/personalDetail", { id }).then(({ data }) => {
				this.orderInfo = data;
				uni.hideLoading();
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>